<template>
  <Tooltip :title="getTitle" placement="top" :mouseEnterDelay="0.5">
    <Popover title="" trigger="click">
      <template #content>
        <div style="width: 300px; max-height: 500px; overflow-y: auto">
          <Scrollbar>
            <div class="flex-auto pr-1 mb-2">
              <ul>
                <li
                  class="p-1 mb-1 overflow-hidden cursor-pointer source-componet-item"
                  :class="{
                    'source-componet-item-selected': selectPortal?.id == item.id,
                  }"
                  v-for="(item, index) in aryPortal"
                  :key="index"
                  @click="openPortal(item)"
                >
                  <Icon
                    :icon="item.icon"
                    :size="26"
                    v-if="item.icon"
                    :color="'rgb(33, 119, 243)'"
                  />
                  <Tooltip :title="item.name" placement="top" :mouseEnterDelay="0.5">
                    <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{
                      item.name
                    }}</div>
                  </Tooltip>
                </li>
              </ul>
            </div>
          </Scrollbar>
        </div>
      </template>
      <appstore-outlined style="font-size: 16.8px" />
    </Popover>
  </Tooltip>
</template>
<script lang="ts">
  import { defineComponent, unref, ref, onMounted } from 'vue';
  import { Tooltip, Popover } from 'ant-design-vue';
  import { AppstoreOutlined } from '@ant-design/icons-vue';
  import { getPortalListByUser } from '/@/api/system/system';
  import { useGo } from '/@/hooks/web/usePage';
  import { Scrollbar } from '/@/components/Scrollbar';
  import Icon from '/@/components/Icon/index';
  import { useUserStore } from '/@/store/modules/user';
  export default defineComponent({
    name: 'Portal',
    components: { AppstoreOutlined, Tooltip, Popover, Scrollbar, Icon },

    setup() {
      const userStore = useUserStore();
      const go = useGo();
      const getTitle = '切换门户';
      const aryPortal = ref<Recordable>([]);
      const selectPortal = ref({});
      function openPortal(item) {
        selectPortal.value = item;
        let path = '/portal';
        go({
          path: path,
          query: {
            id: item.id,
            name: item.name,
          },
        });
      }
      onMounted(() => {
        getPortalListByUser().then((data) => {
          aryPortal.value = data;

          let serverInfo = userStore.getServerInfo;
          let defaultId = serverInfo.portalId;
          aryPortal.value = aryPortal.value.filter((item) => item.id != defaultId);

          console.log('getPortalListByUser aryPortal.value', aryPortal.value);
        });
      });
      return {
        getTitle,
        selectPortal,
        openPortal,
        aryPortal,
      };
    },
  });
</script>

<style scoped>
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .source-componet-item {
    width: 143px;
    overflow: hidden;
    padding: 4px 5px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .source-componet-item:hover {
    border-color: #0960bd;
    color: #0960bd;
    background-color: rgba(9, 96, 189, 0.06);
  }
  .source-componet-item-selected {
    border-color: #0960bd;
    color: #0960bd;
    background-color: rgba(9, 96, 189, 0.06);
  }
</style>
